<template>
    <div>
        <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
        <School :getSchoolName="getSchoolName"></School>
        <hr>
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
        <!-- <Student v-on:studentName="getStudentName"></Student> -->
        <!-- <Student @studentName="getStudentName"></Student> -->

        <!-- 注意此处的@click会被当成自定义事件，若想被识别为原生事件，需要加native -->
        <!-- <Student @studentName="getStudentName" @click="showName"></Student> -->
        <Student @studentName="getStudentName" @click.native="showName"></Student>
        
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
        <!-- <Student ref="studentName"></Student> -->

    </div>
</template>
<script>
    // 引入组件
    import Student from './components/Student.vue';
    import School from './components/School.vue'
    export default {
        name:'App',
        components:{Student,School},
        methods:{
            getSchoolName(name){
                console.log("App接收到了学校名称：",name)
            },
            getStudentName(name,...params){
                console.log('App接收到了学生姓名：',name,params)
            },
            showName(){
                console.log('展示姓名')
            }
        },
        mounted(){
            // this.$refs.studentName.$on('studentName',this.getStudentName) // 调用自定义事件
            // this.$refs.studentName.$once('studentName',this.getStudentName) // 只触发一次
        }
    }
</script>